<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>水里捞会员</title>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" />
	<link href="css/templatemo-style.css" rel="stylesheet" />
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/jquery.min.js" type=”text/javascript”></script>
	<style>
		.list {
			list-style: none;
			font-size: 20px;
			padding-left: 25px;
			color: #666666;
			line-height: 50px;
			cursor: pointer;
		}

		.active {
			color: rgb(230, 0, 18);
		}

		.list:hover {
			color: rgb(230, 0, 18);
		}

		.title {
			height: 57px;
			color: #666666;
			font-size: 28px;
			background: url(https://www.haidilao.com/zh/template/page/tzzgx/meun_bg1.png) no-repeat left top;
			padding-left: 18px;
			display: inline-block;
			line-height: 50px;
		}

		p {
			display: block;
			margin-block-start: 1em;
			margin-block-end: 1em;
			margin-inline-start: 0px;
			margin-inline-end: 0px;
		}
	</style>
</head>

<body>

	<div class="container">
		<div class="placeholder">
			<div class="parallax-window">
				<div class="tm-header">
					<div class="row tm-header-inner">
						<div class="col-md-6 col-12">
							<img src="img/logo.png" alt="Logo" class="tm-site-logo" />
							<div class="tm-site-text-box">
								<h1 class="tm-site-title">水里捞餐厅</h1>
								<h6 class="tm-site-description">创造欢乐火锅时光</h6>
							</div>
						</div>
						<nav class="col-md-6 col-6 tm-nav">
							<ul class="tm-nav-ul">
								<li class="tm-nav-li"><a href="index.html" class="tm-nav-link">主页</a></li>
								<li class="tm-nav-li"><a href="about.html" class="tm-nav-link">关于我们</a></li>
								<li class="tm-nav-li"><a href="contact.html" class="tm-nav-link active">水里捞会员</a></li>
							</ul>
						</nav>
					</div>
				</div>
			</div>
		</div>

		<main>
			<div>
				<img style="width:1200px ;"
					src="img/huiyuan2.jpg" alt=""
					class="col-12">
			</div>
			<!-- 主体 -->
			<div class="row tm-header-inner" id="con">
				<!-- 导航菜单 -->
				<div class="col-lg-4 col-md-4 col-sm-4 col-4" style="display: inline-block;">
					<div>
						<h2 class="title">水里捞会员</h2>
						<ul id="lists">
							<li v-for="(item,index) in todos" class="list" v-on:click="change(index)"
								v-bind:class="{active:index==current}">{{item.text}}</li>
						</ul>
					</div>
				</div>
				<!-- 文章一 -->
				<div class="col-lg-8 col-md-8 col-sm-8 col-8" style="width: 600px;border-left: 1px solid #e0e0e0;" v-bind:class="{hidden:current!=0}">
					<h2 style="height: 57px;color: #666666;font-size: 28px;padding-left: 18px;line-height: 50px;">
						成为水里捞会员</h2>
					<p style="list-style: none;font-size: 20px;padding-left: 25px;">
						会员有什么用:
					</p>
					<p style="font-size: 16px;padding-left: 35px;">
						注册成为水里捞会员，可使用网上排号、订餐功能；消费可获取捞币，用于兑换捞币商城中的产品，以及其他丰富的增值服务。
					</p>
					<p style="list-style: none;font-size: 20px;padding-left: 25px;">
						会员注册方式:
					</p>
					<p style="font-size: 16px;padding-left: 35px;">
						您可通过以下任一途径，提交注册信息，审核通过即可成为海底捞会员：水里捞APP、水里捞微信公众号、水里捞门店点餐Pad。
					</p>
				</div>
				<!-- 文章二 -->
				<div class="col-lg-6 col-md-6 col-sm-6 col-6 "
					style="width: 400px;border-left: 1px solid #e0e0e0;" v-bind:class="{hidden:current!=1}">
					<h2 class="title1" opentype="page">使用捞币</h2>
					<div class="summary1">
						<p><strong>捞币获取方式：</strong></p>
						<p>　　会员于海底捞中国内地火锅门店消费时，登录并明示会员身份，每消费1元可积1捞币</p>
						<p>　　会员参与海底捞APP不定期举办的线上活动，如签到等，可获取捞币。</p>
						<p> </p>
						<p><strong>捞币有效期：</strong></p>
						<p>自捞币产生之日起有效期不低于24个月，最长不超过25个月，每次产生的捞币于第25个月1号00:00:00清除。如2018年1月10号获得的捞币，截至2020年1月31日还未使用的，则未使用的捞币将于2020年2月1日00:00:00统一清除。
						</p>
						<p>　　注：</p>
						<p>　　（1）积分转换为捞币的，有效期仍按积分产生之日起算；</p>
						<p>　　（2）2016年10月10日之前所有会员的历史积分，有效期截止日仍为2018年10月9日，过期未使用则统一清除。</p>
						<p> </p>
						<p><strong>如何使用捞币：</strong></p>
						<p>　　在海底捞APP、海底捞微信公众号、海底捞门店点餐Pad上均可进入捞币商城，消耗捞币兑换产品</p>
						<p>　　在海底捞APP可使用捞币参与不定期举办的线上活动。</p>
					</div>
				</div>
				<!-- 文章三 -->
				<div class="col-lg-6 col-md-6 col-sm-6 col-6 "
					style="width: 400px;border-left: 1px solid #e0e0e0;" v-bind:class="{hidden:current!=2}">
					<h2 class="title1" opentype="page">会员等级规则</h2>
					<div class="summary1">
						<p><strong>会员等级规则：</strong></p>
						<p>　　按照会员近12个月获得的成长值，依次划分为红海会员、银海会员、金海会员和黑海会员，降级规则另有规定除外。</p>
						<p>　　红海会员（原1星会员）：0-1999成长值；</p>
						<p>　　银海会员（原2星会员）：2000-5999成长值；</p>
						<p>　　金海会员（原3星会员）：6000-11999成长值；</p>
						<p>　　黑海会员（原4，5星会员）：12000成长值及以上 ；</p>
						<p> </p>
						<p><strong>会员升级规则：</strong>每月1日定级。最近12个月，获得相应等级成长值，升至相应的会员等级。</p>
						<p></p>
						<p>
							<strong>会员降级规则：</strong>每月1日定级，最近12个月，如果达不到维持当前等级会员所需的成长值，则降一级。6个自然月内最多只降级一次。</p>
					</div>
				</div>
			</div>
			<div><img src="img/huiyuan.png" alt="" class="img-fluid"></div>
		</main>

		<footer class="tm-footer text-center">
			<p>Copyright &copy; 2019.Just All rights reserved.</p>
		</footer>
	</div>
	<script>
		var contactv = new Vue({
			el: "#con",
			data: {
				current: 0,
				todos: [{ text: "成为水里捞会员" }, { text: "使用捞币" }, { text: "会员等级规则" }]
			},
			methods: {
				change: function (index) {
					this.current = index;
				}
			},
		});
	</script>
</body>

</html>